[V0_FILE]typescriptreact:file="components/gold-bar-logo.tsx" isMerged="true" const GOLD = "#d4af37" interface GoldBarLogoProps { size?: number } export function GoldBarLogo({ size = 36 }: GoldBarLogoProps) { return ( ) } [V0_FILE]typescriptreact:file="components/prompt-editor.tsx" isMerged="true" "use client" import { useEffect, useMemo, useState } from "react" import { GoldBarLogo } from "./gold-bar-logo" import { LogOut } from "lucide-react" const GOLD = "#d4af37" const BG = "#0b0b0c" const SURFACE = "#121214" const BORDER = "#1f1f23" const TEXT = "#e7e7ea" const SUBTEXT = "#a9a9b3" const EMPTY_SLOT = { title: "", category: "", code: "" } const SLOTS = 30 interface Slot { title: string category: string code: string } interface PromptEditorProps { onLogout: () => void } function useSlots() { const [slots, setSlots] = useState(() => { if (typeof window === "undefined") { return Array.from({ length: SLOTS }, () => ({ ...EMPTY_SLOT })) } try { const raw = localStorage.getItem("ims_slots_v1") if (raw) return JSON.parse(raw) } catch {} return Array.from({ length: SLOTS }, () => ({ ...EMPTY_SLOT })) }) useEffect(() => { const id = setTimeout(() => { localStorage.setItem("ims_slots_v1", JSON.stringify(slots)) }, 300) return () => clearTimeout(id) }, [slots]) const reset = () => setSlots(Array.from({ length: SLOTS }, () => ({ ...EMPTY_SLOT }))) return { slots, setSlots, reset } } function TopBar({ onDownloadJSON, onDownloadTXT, onReset, onLogout, }: { onDownloadJSON: () => void onDownloadTXT: () => void onReset: () => void onLogout: () => void }) { return (

IA MONEY START

Cole e gerencie seus 30 prompts — preto & dourado

) } function SlotCard({ index, data, onChange, onCopy, }: { index: number data: Slot onChange: (value: Slot) => void onCopy: (text: string) => void }) { const id = index + 1 return (

#{id} onChange({ ...data, title: e.target.value })} placeholder="Título (opcional)" className="flex-1 min-w-0 px-3 py-2 rounded-lg text-sm" style={{ background: BG, color: TEXT, border: `1px solid ${BORDER}` }} /> onChange({ ...data, category: e.target.value })} placeholder="Categoria" className="w-32 px-3 py-2 rounded-lg text-sm hidden md:block" style={{ background: BG, color: TEXT, border: `1px solid ${BORDER}` }} />

onChange({ ...data, code: e.target.value })}
        placeholder="Cole aqui o seu prompt/código…"
        className="w-full min-h-[140px] rounded-xl p-3 text-sm leading-relaxed resize-none"
        style={{ background: BG, color: TEXT, border: `1px solid ${BORDER}` }}
      />
      {Boolean(data.title || data.category) && (
        <div className="mt-2 text-xs" style={{ color: SUBTEXT }}>
          {data.title && (
            <span>
              <b style={{ color: GOLD }}>{data.title}</b>
            </span>
          )}{" "}
          {data.category && <span> · {data.category}</span>}
        </div>
      )}
    </div>
  )
}

export function PromptEditor({ onLogout }: PromptEditorProps) {
  const { slots, setSlots, reset } = useSlots()
  const [toast, setToast] = useState("")
  const [query, setQuery] = useState("")

const shown = useMemo(() => {
    const q = query.trim().toLowerCase()
    if (!q) return slots
    return slots.filter((s) => (s.title + " " + s.category + " " + s.code).toLowerCase().includes(q))
  }, [slots, query])

function updateAt(i: number, value: Slot) {
    setSlots((prev) => {
      const copy = [...prev]
      copy[i] = value
      return copy
    })
  }

function copy(text: string) {
    if (!text) {
      setToast("Nada para copiar neste slot.")
      setTimeout(() => setToast(""), 1500)
      return
    }
    navigator.clipboard.writeText(text).then(() => {
      setToast("Copiado!")
      setTimeout(() => setToast(""), 1200)
    })
  }

function downloadJSON() {
    const blob = new Blob([JSON.stringify(slots, null, 2)], { type: "application/json" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = "ia-money-start-slots.json"
    a.click()
    URL.revokeObjectURL(url)
  }

function downloadTXT() {
    const content = slots
      .map(
        (s, i) =>
          `#${i + 1} ${s.title || "(sem título)"}${s.category ? ` [${s.category}]` : ""}\n\n${s.code || ""}\n\n———\n`,
      )
      .join("\n")
    const blob = new Blob([content], { type: "text/plain;charset=utf-8" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = "ia-money-start-slots.txt"
    a.click()
    URL.revokeObjectURL(url)
  }

return (
    <div style={{ background: BG, color: TEXT }} className="min-h-screen">
      <TopBar onDownloadJSON={downloadJSON} onDownloadTXT={downloadTXT} onReset={reset} onLogout={onLogout} />

<section className="mx-auto max-w-6xl px-4 py-6">
        <div className="rounded-2xl p-4 mb-4" style={{ background: SURFACE, border: `1px solid ${BORDER}` }}>
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
            <div>
              <h2 className="text-xl font-extrabold" style={{ color: GOLD }}>
                Seus 30 slots de prompts
              </h2>
              <p className="text-sm" style={{ color: SUBTEXT }}>
                Preencha, copie e salve automaticamente. Pesquise por palavras-chave abaixo.
              </p>
            </div>
            <input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Buscar por título, categoria ou conteúdo…"
              className="w-full md:w-96 px-3 py-2 rounded-lg text-sm"
              style={{ background: BG, color: TEXT, border: `1px solid ${BORDER}` }}
            />
          </div>
        </div>

<div className="grid gap-4 md:grid-cols-2">
          {shown.map((slot, i) => (
            <SlotCard key={i} index={i} data={slot} onChange={(v) => updateAt(i, v)} onCopy={copy} />
          ))}
        </div>
      </section>

{toast && (
        <div
          className="fixed bottom-4 left-1/2 -translate-x-1/2 px-4 py-2 rounded-full text-sm shadow-lg"
          style={{ background: SURFACE, border: `1px solid ${BORDER}`, color: GOLD }}
        >
          {toast}
        </div>
      )}

<footer className="mt-8" style={{ borderTop: `1px solid ${BORDER}`, background: BG }}>
        <div
          className="mx-auto max-w-6xl px-4 py-6 text-xs flex items-center justify-between"
          style={{ color: SUBTEXT }}
        >
          <span>© {new Date().getFullYear()} IA Money Start</span>
          <span style={{ color: GOLD }}>Preto & Dourado · 30 slots</span>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "15.5.4",
    "next-themes": "^0.4.6",
    "react": "19.1.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.1.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.76",
    "server-only": "0.0.1",
    "stripe": "19.1.0",
    "@stripe/react-stripe-js": "5.2.0",
    "@stripe/stripe-js": "8.0.0"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescript:file="lib/stripe.ts" isMerged="true"
import "server-only"

import Stripe from "stripe"

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
[V0_FILE]typescriptreact:file="components/login-page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { GoldBarLogo } from "./gold-bar-logo"

const GOLD = "#d4af37"
const BG = "#0b0b0c"
const SURFACE = "#121214"
const BORDER = "#1f1f23"
const TEXT = "#e7e7ea"
const SUBTEXT = "#a9a9b3"

interface LoginPageProps {
  onLogin: (email: string) => void
}

export function LoginPage({ onLogin }: LoginPageProps) {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)

// Simulate login delay
    await new Promise((resolve) => setTimeout(resolve, 800))

// Simple validation
    if (email && password) {
      onLogin(email)
    }

setIsLoading(false)
  }

return (
    <div className="min-h-screen flex items-center justify-center px-4" style={{ background: BG }}>
      <div className="w-full max-w-md">
        {/* Logo and Title */}
        <div className="text-center mb-8">
          <div
            className="inline-flex p-4 rounded-2xl mb-4"
            style={{ background: SURFACE, border: `1px solid ${BORDER}` }}
          >
            <GoldBarLogo size={48} />
          </div>
          <h1 className="text-3xl font-extrabold tracking-wide mb-2" style={{ color: GOLD }}>
            IA MONEY START
          </h1>
          <p className="text-sm" style={{ color: SUBTEXT }}>
            Gerencie seus 30 prompts com estilo
          </p>
        </div>

{/* Login Form */}
        <div className="rounded-2xl p-6" style={{ background: SURFACE, border: `1px solid ${BORDER}` }}>
          <h2 className="text-xl font-bold mb-6" style={{ color: TEXT }}>
            Entrar na sua conta
          </h2>

<form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label htmlFor="email" className="block text-sm font-medium mb-2" style={{ color: TEXT }}>
                Email
              </label>
              <input
                id="email"
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="seu@email.com"
                required
                className="w-full px-4 py-3 rounded-lg text-sm focus:outline-none focus:ring-2 transition-all"
                style={{
                  background: BG,
                  color: TEXT,
                  border: `1px solid ${BORDER}`,
                }}
              />
            </div>

<div>
              <label htmlFor="password" className="block text-sm font-medium mb-2" style={{ color: TEXT }}>
                Senha
              </label>
              <input
                id="password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="••••••••"
                required
                className="w-full px-4 py-3 rounded-lg text-sm focus:outline-none focus:ring-2 transition-all"
                style={{
                  background: BG,
                  color: TEXT,
                  border: `1px solid ${BORDER}`,
                }}
              />
            </div>

<button
              type="submit"
              disabled={isLoading}
              className="w-full px-4 py-3 rounded-lg text-sm font-semibold hover:brightness-110 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
              style={{ background: GOLD, color: BG }}
            >
              {isLoading ? "Entrando..." : "Entrar"}
            </button>
          </form>

<div className="mt-6 text-center">
            <p className="text-xs" style={{ color: SUBTEXT }}>
              Seus dados são salvos localmente no navegador
            </p>
          </div>
        </div>

{/* Footer */}
        <div className="mt-8 text-center text-xs" style={{ color: SUBTEXT }}>
          <p>© {new Date().getFullYear()} IA Money Start</p>
          <p className="mt-1" style={{ color: GOLD }}>
            Preto & Dourado · 30 slots
          </p>
          <p className="mt-2">
            Desenvolvedor: <span style={{ color: GOLD }}>sanchesalmeida109@gmail.com</span>
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { LoginPage } from "@/components/login-page"
import { PaymentPage } from "@/components/payment-page"
import { PromptEditor } from "@/components/prompt-editor"
import { DEVELOPER_EMAIL } from "@/lib/products"

type AppState = "loading" | "login" | "payment" | "editor"

export default function Page() {
  const [appState, setAppState] = useState<AppState>("loading")
  const [userEmail, setUserEmail] = useState("")

useEffect(() => {
    const authState = localStorage.getItem("ims_auth")
    const savedEmail = localStorage.getItem("ims_email")
    const paidState = localStorage.getItem("ims_paid")

if (authState === "true" && savedEmail) {
      setUserEmail(savedEmail)

// Check if user is developer (whitelisted)
      if (savedEmail.toLowerCase() === DEVELOPER_EMAIL.toLowerCase()) {
        setAppState("editor")
      } else if (paidState === "true") {
        setAppState("editor")
      } else {
        setAppState("payment")
      }
    } else {
      setAppState("login")
    }
  }, [])

const handleLogin = (email: string) => {
    localStorage.setItem("ims_auth", "true")
    localStorage.setItem("ims_email", email)
    setUserEmail(email)

// Check if user is developer (whitelisted)
    if (email.toLowerCase() === DEVELOPER_EMAIL.toLowerCase()) {
      setAppState("editor")
    } else {
      // Check if already paid
      const paidState = localStorage.getItem("ims_paid")
      if (paidState === "true") {
        setAppState("editor")
      } else {
        setAppState("payment")
      }
    }
  }

const handlePaymentComplete = () => {
    localStorage.setItem("ims_paid", "true")
    setAppState("editor")
  }

const handleLogout = () => {
    localStorage.removeItem("ims_auth")
    localStorage.removeItem("ims_email")
    // Note: We keep ims_paid so if they log back in, they don't need to pay again
    setAppState("login")
    setUserEmail("")
  }

if (appState === "loading") {
    return (
      <div className="min-h-screen flex items-center justify-center" style={{ background: "#0b0b0c" }}>
        <div className="text-center">
          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-[#d4af37] border-r-transparent"></div>
        </div>
      </div>
    )
  }

if (appState === "login") {
    return <LoginPage onLogin={handleLogin} />
  }

if (appState === "payment") {
    return <PaymentPage onPaymentComplete={handlePaymentComplete} userEmail={userEmail} />
  }

return <PromptEditor onLogout={handleLogout} />
}
[V0_FILE]typescript:file="lib/products.ts" isEdit="true" isQuickEdit="true"
export interface Product {
  id: string
  name: string
  description: string
  priceInCents: number
}

// Product catalog for the prompt management app
export const PRODUCTS: Product[] = [
  {
    id: "prompt-editor-access",
    name: "Acesso ao IA Money Start",
    description: "Acesso completo ao editor de 30 prompts com tema preto e dourado",
    priceInCents: 4999, // R$ 49.99
  },
]

// Developer email that gets free access
export const DEVELOPER_EMAIL = "sanchesalmeida109@gmail.com"
[V0_FILE]typescript:file="app/actions/stripe.ts" isEdit="true"
"use server"

import { stripe } from "@/lib/stripe"
import { PRODUCTS } from "@/lib/products"

export async function startCheckoutSession(productId: string) {
  const product = PRODUCTS.find((p) => p.id === productId)
  if (!product) {
    throw new Error(`Product with id "${productId}" not found`)
  }

// Create Checkout Sessions
  const session = await stripe.checkout.sessions.create({
    ui_mode: "embedded",
    redirect_on_completion: "never",
    line_items: [
      {
        price_data: {
          currency: "brl",
          product_data: {
            name: product.name,
            description: product.description,
          },
          unit_amount: product.priceInCents,
        },
        quantity: 1,
      },
    ],
    mode: "payment",
  })

return session.client_secret
}
[V0_FILE]typescriptreact:file="components/payment-page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useCallback, useState } from "react"
import { EmbeddedCheckout, EmbeddedCheckoutProvider } from "@stripe/react-stripe-js"
import { loadStripe } from "@stripe/stripe-js"
import { GoldBarLogo } from "./gold-bar-logo"
import { startCheckoutSession } from "@/app/actions/stripe"
import { PRODUCTS } from "@/lib/products"

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!)

const GOLD = "#d4af37"
const BG = "#0b0b0c"
const SURFACE = "#121214"
const BORDER = "#1f1f23"
const TEXT = "#e7e7ea"
const SUBTEXT = "#a9a9b3"

interface PaymentPageProps {
  onPaymentComplete: () => void
  userEmail: string
}

export function PaymentPage({ onPaymentComplete, userEmail }: PaymentPageProps) {
  const [showCheckout, setShowCheckout] = useState(false)
  const product = PRODUCTS[0] // Get the access product

const startCheckoutSessionForProduct = useCallback(async () => {
    const clientSecret = await startCheckoutSession(product.id)
    // Listen for payment completion
    setTimeout(() => {
      // In a real app, you'd verify payment status with Stripe
      // For now, we'll mark as paid after showing checkout
      localStorage.setItem("ims_paid", "true")
      onPaymentComplete()
    }, 5000) // Give user time to complete payment
    return clientSecret
  }, [product.id, onPaymentComplete])

if (showCheckout) {
    return (
      <div className="min-h-screen flex items-center justify-center px-4" style={{ background: BG }}>
        <div className="w-full max-w-2xl">
          <div className="text-center mb-6">
            <div
              className="inline-flex p-4 rounded-2xl mb-4"
              style={{ background: SURFACE, border: `1px solid ${BORDER}` }}
            >
              <GoldBarLogo size={48} />
            </div>
            <h1 className="text-2xl font-extrabold tracking-wide mb-2" style={{ color: GOLD }}>
              Complete seu pagamento
            </h1>
            <p className="text-sm" style={{ color: SUBTEXT }}>
              Após o pagamento, você terá acesso completo ao editor
            </p>
          </div>

<div id="checkout">
            <EmbeddedCheckoutProvider
              stripe={stripePromise}
              options={{ fetchClientSecret: startCheckoutSessionForProduct }}
            >
              <EmbeddedCheckout />
            </EmbeddedCheckoutProvider>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen flex items-center justify-center px-4" style={{ background: BG }}>
      <div className="w-full max-w-md">
        {/* Logo and Title */}
        <div className="text-center mb-8">
          <div
            className="inline-flex p-4 rounded-2xl mb-4"
            style={{ background: SURFACE, border: `1px solid ${BORDER}` }}
          >
            <GoldBarLogo size={48} />
          </div>
          <h1 className="text-3xl font-extrabold tracking-wide mb-2" style={{ color: GOLD }}>
            IA MONEY START
          </h1>
          <p className="text-sm" style={{ color: SUBTEXT }}>
            Bem-vindo, {userEmail}
          </p>
        </div>

{/* Payment Info */}
        <div className="rounded-2xl p-6 mb-4" style={{ background: SURFACE, border: `1px solid ${BORDER}` }}>
          <h2 className="text-xl font-bold mb-4" style={{ color: TEXT }}>
            {product.name}
          </h2>
          <p className="text-sm mb-6" style={{ color: SUBTEXT }}>
            {product.description}
          </p>

<div className="flex items-baseline gap-2 mb-6">
            <span className="text-4xl font-extrabold" style={{ color: GOLD }}>
              R$ {(product.priceInCents / 100).toFixed(2)}
            </span>
            <span className="text-sm" style={{ color: SUBTEXT }}>
              pagamento único
            </span>
          </div>

<ul className="space-y-3 mb-6">
            {[
              "30 slots para seus prompts",
              "Salvamento automático",
              "Exportar em JSON e TXT",
              "Busca e filtros avançados",
              "Tema preto e dourado exclusivo",
              "Acesso vitalício",
            ].map((feature, i) => (
              <li key={i} className="flex items-center gap-2 text-sm" style={{ color: TEXT }}>
                <span
                  className="flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center"
                  style={{ background: GOLD }}
                >
                  <span className="text-xs font-bold" style={{ color: BG }}>
                    ✓
                  </span>
                </span>
                {feature}
              </li>
            ))}
          </ul>

<button
            onClick={() => setShowCheckout(true)}
            className="w-full px-4 py-3 rounded-lg text-sm font-semibold hover:brightness-110 transition-all"
            style={{ background: GOLD, color: BG }}
          >
            Pagar agora
          </button>
        </div>

{/* Footer */}
        <div className="text-center text-xs" style={{ color: SUBTEXT }}>
          <p>Pagamento seguro processado pelo Stripe</p>
          <p className="mt-2">
            Desenvolvedor: <span style={{ color: GOLD }}>sanchesalmeida109@gmail.com</span>
          </p>
        </div>
      </div>
    </div>
  )
}</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This